<template>
  <h1>个人信息</h1>
  <h1 v-show="person.name">姓名：{{person.name}}</h1>
  <h1>年龄：{{person.age}}</h1>
  <button @click="test">测试触发一下Demo组件的Hello事件</button>    
  
</template>

<script>
// import {h} from 'vue'
import {reactive} from 'vue'

export default {
  name: 'Demo',
  props:['msg','school'],
  emits:['hello'],
  beforeCreate(){
      console.log('---beforeCreate---')
  },
  
  // 此处只是测试一下setup，暂时不考虑响应式的问题
  setup(props,context){
    // console.log('---setup---',props)
    // console.log('---setup---',context.attrs)
    // console.log('---setup---',context.emit)
    console.log('---setup---',context.slots)
    // 数据
    let person = reactive({
      name:'张三',
      age:18
    })

    // 方法
    function test(){
        context.emit('hello',666)
    }
    
    function changeInfo(){
      person.name ='李四'
      person.age=100

      // job.value.type='UI设计师'
      // job.value.salary = '50K'
      // console.log(name,age)
    }

// 返回一个对象（常用）
    return{
      person,
      test
    }

  }
}
</script>

